<template>
  <el-card>
    <div slot="header">
      <h3>修改进价多计量-查看页面</h3>
    </div>
    <div>
      <el-row type="flex" justify="end">
        <el-button
          v-if="tableData.length > 0"
          type="text"
          size="large"
          @click="handleExportData"
          :loading="loading.export"
          >模板导出</el-button
        >
      </el-row>
      <el-row>
        <el-form size="mini" ref="updatePriceForm" :model="updatePriceForm" label-width="140px">
          <el-col :span="5">
            <el-form-item label="是否自动调整售价：">
              <el-select disabled v-model="updatePriceForm.canChange" placeholder="请选择">
                <el-option
                  v-for="item in autoModifySalepriceOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <el-form-item v-show="updatePriceForm.canChange == 2" label="不调售价原因：">
              <el-input disabled :rows="1" type="textarea" v-model="updatePriceForm.reason"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <skus-table
          :loading="loading.table"
          :table-height="500"
          :data-source="tableData"
          :columns="tableColumns"
        />
      </el-row>
      <FooterFields :footerFields="viewdata" />
    </div>
  </el-card>
</template>

<script>
import { ApiRequest, ApiRequestExportTable } from '@api/basePage';
import FooterFields from '@/pages/commodity/components/FooterFields';
import SkusTable from '@/components/skusTable';
/* utils */
import { generateUuid, createExcelByExport, generateHighlightNode } from '@/utils/bizUtils';
export default {
  components: {
    FooterFields,
    SkusTable
  },
  data () {
    return {
      updatePriceForm: {
        canChange: '1',
        reason: ''
      },
      autoModifySalepriceOption: [
        { label: '是', value: '1' },
        { label: '否', value: '2' }
      ],
      tableColumns: [
        {
          title: '供应商编码',
          key: 'supplyNo',
          align: 'center',
          fixed: 'left',
          width: 110,
          sortable: true,
          render: (h, { row }) => (
            <span>{row.supplyUuid}</span>
          )
        },
        {
          title: '供应商名称',
          key: 'supplyName',
          align: 'center',
          width: 110,
          fixed: 'left',
          sortable: true,
          render: (h, { row }) => (
            <span>{row.supplyInfoDTO ? row.supplyInfoDTO.supplyName : ''}</span>
          )
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          align: 'center',
          fixed: 'left',
          sortable: true,
          minWidth: 100
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center',
          fixed: 'left',
          sortable: true,
          render: (h, { row }) => (
            <span>
              {row.supplyProductInfo ? row.supplyProductInfo.productName : ''}
            </span>
          )
        },
        {
          title: '规格',
          key: 'specDetailStr',
          align: 'center',
          fixed: 'left',
          sortable: true,
          render: (h, { row }) => (
            <span>
              {row.supplyProductInfo ? row.supplyProductInfo.specDetailStr : ''}
            </span>
          )
        },
        {
          title: '参照城市',
          key: 'templateCityName',
          align: 'center',
          fixed: 'left',
          sortable: true,
        },
        {
          title: '供应商管理区域',
          align: 'center',
          key: 'supplyManagerArea',
          render: (h, { row }) => (
            <span>{row.supplyInfoDTO ? row.supplyInfoDTO.supplyManagerArea : ''}</span>
          )
        },
        {
          title: '是否敏感',
          key: 'isPriceSensitive',
          align: 'center',
          render: (h, { row }) => (
            <span>
              {row.supplyProductInfo.isPriceSensitive == 1 ? '是' : '否'}
            </span>
          )
        },
        {
          title: '商品管理区域',
          key: 'manageArea',
          align: 'center',
          render: (h, { row }) => (
            <span> {row.supplyProductInfo ? row.supplyProductInfo.manageArea : ''}</span>
          )
        },
        {
          title: '业务区域',
          key: 'templateCitySaleAreaName',
        },
        {
          title: '销售区域',
          key: 'saleAreaShortNames',
          render: (h, { row }) => {
            return <span>{row.supplyProductInfo ? row.supplyProductInfo.saleAreaShortNames : ''}</span>;
          }
        },
        {
          title: '供货计量单位',
          key: 'supplyGoodsUnit',
          align: 'center',
          render: (h, { row }) => (
            <span> {row.supplyProductInfo ? row.supplyProductInfo.supplyGoodsUnit : ''}</span>
          )
        },
        {
          title: '主计量单位',
          key: 'unitName',
          align: 'center',
          render: (h, { row }) => (
            <span> {row.supplyProductInfo ? row.supplyProductInfo.unitName : ''}</span>
          )
        },
        {
          title: '进价类型',
          key: 'purchasePriceTypeStr',
          align: 'center',
          minWidth: 150
        },
        {
          title: '理论转换率',
          key: 'theoryConvertRatio',
        },
        {
          title: '实际转换率',
          key: 'actualConvertRatio',
        },
        {
          title: '异常转换率',
          key: 'abnormalPurchaseConvertRatioUpdate',
        },
        {
          title: '辅计量进价',
          children: [
            {
              title: '原进价',
              align: 'center',
              key: 'purchasePrice',
              minWidth: 150
            },
            {
              title: '现进价',
              align: 'center',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'purchasePrice')
              }
            }
          ]
        },
        {
          title: '主计量进价',
          children: [
            {
              title: '原进价',
              align: 'center',
              key: 'mainPurchasePrice',
              minWidth: 150
            },
            {
              title: '现进价',
              key: 'mainPurchasePriceUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'mainPurchasePrice')
              }
            }
          ]
        },
        {
          title: '进价浮动比率',
          key: 'mainPurchasePriceFloatRadio',
        },
        {
          title: '进价备注',
          children: [
            {
              title: '原值',
              align: 'center',
              key: 'purchasePriceNote',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'purchasePriceNoteUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'purchasePriceNote')
              }
            }
          ]
        },
        {
          title: '加价类型',
          key: 'addPriceTypeStr',
          align: 'center',
          minWidth: 150
        },
        {
          title: '运费比例或金额',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'freightRatio',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'freightRatioUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'freightRatio')
              }
            }
          ]
        },
        {
          title: '包装比例或金额',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'packRatio',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'packRatioUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'packRatio')
              }
            }
          ]
        },
        {
          title: '加工费比例或金额',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'processChargesRatio',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'processChargesRatioUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'processChargesRatio')
              }
            }
          ]
        },
        {
          title: '返利折合比例或金额',
          children: [
            {
              title: '原值',
              key: 'rebateRatio',
            },
            {
              title: '现值',
              key: 'rebateRatioUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'rebateRatio')
              }
            }
          ]
        },
        {
          title: '返利说明',
          children: [
            {
              title: '原值',
              key: 'rebateRatioDesc',
            },
            {
              title: '现值',
              key: 'rebateRatioDescUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'rebateRatioDesc')
              }
            }
          ]
        },
        {
          title: '实际转换率辅计量成本价',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'actualConvertRatioCostPrice',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'actualConvertRatioCostPriceUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'actualConvertRatioCostPrice')
              }
            }
          ]
        },
        {
          title: '理论转换率辅计量成本价',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'theoryConvertRatioCostPrice',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'theoryConvertRatioCostPriceUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'theoryConvertRatioCostPrice')
              }
            }
          ]
        },
        {
          title: '主计量成本价',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原值',
              key: 'mainUnitCostPrice',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现值',
              key: 'mainUnitCostPriceUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'mainUnitCostPrice')
              }
            }
          ]
        },
        {
          title: '主计量成本价浮动比率',
          key: 'mainUnitCostFloatPrice',
          align: 'center',
          minWidth: 150
        },
        {
          title: '厂家代码',
          key: 'factoryCode',
          align: 'center',
          minWidth: 150
        },
        {
          title: '厂家面价',
          align: 'center',
          minWidth: 150,
          children: [
            {
              title: '原价',
              key: 'factoryFacePrice',
              align: 'center',
              minWidth: 150
            },
            {
              title: '现价',
              key: 'factoryFacePriceUpdate',
              render: (h, { row }) => {
                return generateHighlightNode(h, row, 'factoryFacePrice')
              }
            }
          ]
        },
        {
          title: '厂家调价原因',
          key: 'changePriceReason',
          align: 'center',
          minWidth: 150
        },
        {
          title: '竞争对手',
          key: 'opponentName',
          align: 'center',
          minWidth: 150
        },
        {
          title: '落实开票价格',
          key: 'invoicePrice',
          align: 'center',
          minWidth: 150
        },
        {
          title: '我司进价与竞争对手差额比例',
          key: 'opponentRatio',
          align: 'center',
        }
      ],
      tableData: [],
      recordNo: '',
      viewdata: {},
      loading: {
        table: false,
        export: false
      }
    };
  },
  mounted () {},
  created () {
    this.recordNo = this.$route.query.recordNo;
    this.getData();
  },
  methods: {
    getData () {
      this.loading.table = true;
      ApiRequest(
        '/sysback/supplyareaprice/getUpdateDetailByRecordNo?recordNo=' +
          this.recordNo,
        'post',
        '',
        false
      )
        .then(res => {
          this.loading.table = false;
          if (res.retStatus !== '1') {
            return;
          }
          const { listDetail, canChange, launchReason } = res.retData;
          this.tableData = listDetail;
          this.viewdata = res.retData;
          this.updatePriceForm = {
            canChange: canChange || '1',
            reason: launchReason
          }
        })
        .catch(() => {
          this.loading.table = false;
        });
    },
    // 导出表格
    handleExportData () {
      this.loading.export = true;
      // productType 1 单计量 2 多计量
      ApiRequestExportTable(
        `/sysback/supplyareaprice/downLoadSupplyPriceInfoByRecordNo?recordNo=${this.recordNo}&productType=2`,
        'post',
        false
      ).then(res => {
        createExcelByExport({ res, excelTitle: `进价信息模板-多计量模板_${generateUuid()}` });
        this.loading.export = false;
      }).catch(() => {
        this.loading.export = false;
        this.$message.error('导出失败');
      });
    },
  }
};
</script>

<style lang="less" scoped>
.colclass {
  height: 30px;
  line-height: 30px;
  margin-right: 80px;
}
</style>
